<template>
	<div>
		<el-upload class="upload-demo" ref="uploadfile" action="#" 
		:on-change="handleChange" :on-remove="handleRemove"
			:file-list="fileList" :auto-upload="false" :limit="numLimit">
			<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
		</el-upload>
		
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column prop="realName" label="文件名" width="120">
				<template slot-scope="scope">
					<a href="#" @click="downloadFile(scope.row)">{{scope.row.realName}}</a>
				</template>
			</el-table-column>
			<el-table-column prop="bucketName" label="存储空间" width="120">
			</el-table-column>
			<el-table-column prop="objectName" label="对象名">
			</el-table-column>
			<el-table-column prop="uploadTime" label="上传时间">
			</el-table-column>
			<el-table-column prop="uploadUser" label="上传人">
			</el-table-column>
			<el-table-column prop="fileSize" label="大小">
			</el-table-column>
			<el-table-column  label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="doDelOssFile(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: "fm",
		props: {
			numLimit: {
				type: Number,
				required: false,
				default: 1
			},
			fileTypes: {
				type: Array,
				required: false
			},
			fileids: {
				type: String,
				required: false,
				default: ''
			}
		},
		data() {
			return {
				tableData: [],
				multipleSelection: [],
				fileList: [],
				nums: null,
				ids:[]
			};
		},
		mounted() {
			if (this.$props.fileids != '') {
				this.ids=this.$props.fileids.split(",");
				this.listOssFile();
			};
			this.nums = this.$props.numLimit;
		},
		methods: {
			submitUpload() {
				let formData = new FormData();
				this.fileList.forEach((d, i) => {
					formData.append("myfile", d.raw);
				})
				formData.append("dir", "activitFiles");
				axios.post("/oss/uploadFile", formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then(resp => {
					this.fileList=[];
					let ids = resp.data.ossIds;
					let ni = ids.split(",");
					this.ids.push(...ni);
					this.listOssFile();
					this.$emit('transfer', this.ids.join(","))
				})
			},
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			handleChange(file, fileList) {
				this.fileList = fileList;
			},
			doDelOssFile(row) {
				axios.delete("/oss?id=" + row.id+"&bucketName="+row.bucketName+"&objectName="+row.objectName).then(resp => {
					this.suc("文件删除成功");
					let i= this.ids.indexOf(row.id);
					this.ids.splice(i,1);
					this.listOssFile();
					this.$emit('transfer', this.ids.join(","))
				})
			},
			listOssFile(){
				axios.get("/oss/listbyIds?ids=" + this.ids).then(resp => {
					this.tableData = resp.data;
				})
			},
			downloadFile(row){
				location.href=axios.defaults.baseURL+"/oss/download?bucketName="+row.bucketName+"&objectName="+row.objectName+"&relName="+row.realName;
			}
		},
		watch:{
			fileids(n,l){
				this.ids=this.$props.fileids.split(",");
				this.listOssFile();
			}
		}
	}
</script>

<style>
</style>
